<template>
  <div style="width: 100%; height: 300px" :id="id"></div>
</template>

<script>
import * as echarts from 'echarts'

export default {
  props: {
    title: {
      type: String,
      default: ""
    },
    legend1: {
      type: String,
      default: ""
    },
    legend2: {
      type: String,
      default: ""
    },
    id: {
      type: String,
      default: ""
    },
    type: {
      type: String,
      default: "bar"
    },
    xAxisData: {
      type: Array,
      default: []
    },
    seriesData1: {
      type: Array,
      default: []
    },
    seriesData2: {
      type: Array,
      default: []
    },
  },
  data() {
    return {
      barOptions: {
        // color: '#0044f0',
        title: {
          text: this.title,
          // left: 'center',
          textStyle: {					//---主标题内容样式
            color: '#333',
            fontSize: '16px',
            fontWeight: '600'
          },
          padding: 20
        },
        grid: {
          left: '3%',
          right: '3%',
          bottom: '12%',
          containLabel: true
        },
        tooltip: {  // tooltip 用于控制鼠标滑过或点击时的提示框（下一章展开讲）
          trigger: 'axis',
          axisPointer: { // 坐标轴指示器配置项。
            type: 'line', // 'line' 直线指示器  'shadow' 阴影指示器  'none' 无指示器  'cross' 十字准星指示器。
            axis: 'auto', // 指示器的坐标轴。
            snap: true, // 坐标轴指示器是否自动吸附到点上
          },
          showContent: true,
        },
        legend: {
          top: '5%',
          right: '3%',
          data: [this.legend1, this.legend2],
        },
        xAxis: {
          data: [],
        },
        yAxis: {},
        series: [
          {
            name: this.legend1,
            type: this.type,
            barWidth: '20',				//---柱形宽度
            barCategoryGap: '20%',		//---柱形间距
            color: "#0044f0",
            data: [],
          },
          {
            name: this.legend2,
            type: "bar",
            barWidth: '20',				//---柱形宽度
            barCategoryGap: '20%',		//---柱形间距
            color: "#67C23A",
            data: [],
          },
        ],
      }
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.drawLine();
    })
  },
  methods: {
    drawLine() {
      this.myChart = echarts.init(document.getElementById(this.id));
      this.barOptions.xAxis.data = this.xAxisData
      this.barOptions.series[0].data = this.seriesData1
      if (this.seriesData2.length > 0) {
        this.barOptions.series[1].data = this.seriesData2
      }
      this.myChart.setOption(this.barOptions)
      window.addEventListener("resize", () => {
        this.myChart.resize();
      });
    },
    updateChart(dateList, dataList1, dataList2) {
      if (dataList2) {
        this.barOptions.series[0].data = dataList1
        this.barOptions.series[1].data = dataList2
        this.barOptions.xAxis.data = dateList
        this.myChart.setOption(this.barOptions);
      } else {
        this.barOptions.series = [{
          name: "失败",
          type: "line",
          barWidth: '20',				//---柱形宽度
          barCategoryGap: '20%',		//---柱形间距
          color: "#0044f0",
          data: dataList1,
        }]
        this.barOptions.legend = {
          top: '5%',
          right: '3%',
          data: ["失败"],
        }
        this.barOptions.xAxis.data = dateList
        this.myChart.setOption(this.barOptions);
      }
      this.$forceUpdate();
      window.addEventListener("resize", () => {
        this.myChart.resize();
      });
    }
  }
}
</script>



